<template>
  <div class="home-wrapper">
    <!-- Banner图 -->
    <div id="app">
      <el-container>
        <el-container style=" margin-top:20px; height: 800px; border: 1px solid #eee">
          <el-upload
              class="upload-demo"
              ref="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">上传需要处理的遥感文件</div>
          </el-upload>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>


export default {
	name: 'Paeallel',
	components: {

	},
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>

<style lang="stylus" scoped>
.home-wrapper {
  margin-top: 20px;
  width: 70% !important;
  flex-direction column
}
</style>
